<template>
	<!-- 推荐歌单组件 -->
	<view class="song-list">
		<view class="tit-bar">
			{{title}}
			<navigator :url="link" class="more fr">
				歌单广场
			</navigator>
		</view>
		<scroll-view scroll-x class="scroll-view">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goToUrl(item)">
				<image class="img" :src="item.picUrl" mode=""></image>
				<view class="desc ellipsis">{{item.name}}</view>
				<view class="count">
					{{item.playCount>10000 ? Math.floor(item.playCount/10000)+'W' : item.playCount }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {apiGetPersonalized} from "@/apis/index.js"
	export default {
		props:{
			title:{   //题目
				type:String,
				default:''
			},
			link:{   //跳转地址
				type:String,
				default:''
			},
			list:{  //显示数据
				type:Array,
				default:[]
			}
		},
		methods:{
			// 跳转到音乐页面
			goToUrl(item){
				uni.navigateTo({
					url:"/pages/subpages/album/album?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}
	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}
	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>
